<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2023-07-24
  Time: 15:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        /*div{*/
        /*    width: 200px;*/
        /*    height:200px;*/
        /*    border:2px solid #000;*/
        /*}*/
    </style>
</head>
<body>
    哈哈哈哈哈哈哈
    <input type="text" placeholder="输入你的内容"/>
    <button>提交</button>
    <div></div>
    <script>
        const TYPE_ENTER=0  //type为0时表示为进入聊天室的消息 1表示离开的消息，2表示正常的聊天记录
        const TYPE_LEAVE=1
        const TYPE_MSG=2
        var input=document.querySelector('input');
        var button=document.querySelector('button');
        var div=document.querySelector('div');
        //演示websocket在浏览器端如何使用
        //html5已经直接提供了websocket的API，可以直接去使用
        //参数一：websocket的服务地址
        //创建websocket
        var socket=new WebSocket('ws://localhost:3000');

        //open：当和websocket服务连接成功的时候出发
        socket.addEventListener('open',function (){
            div.innerHTML='连接服务成功了';
        })

        //主动给websocket服务发送消息
        button.addEventListener('click',function (){
            var value=input.value;
            socket.send(value)
            input.value=''
        })

        //接收websocket服务的数据
        socket.addEventListener('message',function (mes){
            var data=JSON.parse(mes.data)
            var dv=document.createElement('div')
            dv.innerHTML=data.msg + '------' +data.time
            if(data.type===TYPE_ENTER){
                dv.style.color='green'
            }else if(data.type===TYPE_LEAVE){
                dv.style.color='red'
            }else if(data.type===TYPE_MSG){
                dv.style.color='blue'
            }
            div.appendChild(dv)
        })

        //连接断开
        socket.addEventListener('close',function (){
            div.innerHTML='服务断开连接'
        })
    </script>
</body>
</html>
